<template>
  <div>
    <el-form label-position="top">
      <el-form-item label="用户账户信息">
        <div class="list-row">
          <div class="list-row-item">
            <label><i class="required">*</i>用户名</label>
          </div>

          <div class="list-row-item">
            <label><i class="required">*</i>名字</label>
          </div>

          <div class="list-row-right">
          </div>
        </div>
        <div v-for="(item, idx) in formData.users" :key="idx" class="list-row">
          <div class="list-row-item">
            <el-input v-model="item.username" />
          </div>

          <div class="list-row-item">
            <el-input v-model="item.nickname" />
          </div>

          <div class="list-row-right">
            <el-button
              icon="el-icon-delete"
              v-if="formData.users.length > 1"
              @click="onDelete(idx)"
            >
              删除
            </el-button>
          </div>
        </div>

        <el-button icon="el-icon-plus" type="text" @click="onAddUser">添加用户</el-button>
      </el-form-item>

      <el-form-item label="登陆密码设置">
        <el-radio-group v-model="passwordType">
          <el-radio :label="0">系统生成</el-radio>
          <el-radio :label="1">统一使用</el-radio>
        </el-radio-group>

        <div v-if="passwordType === 1" style="margin-top: 10px">
          <el-input v-model="passwordValue" placeholder="请输入使用的密码" type="password" />
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" native-type="submit">确定</el-button>

        <el-button @click="onBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { createForm } from '@/plugins/element'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'AuthUserCreate',
  setup () {
    const form = createForm()
    const formData = ref<ManagerCreateForm>({
      users: [{ username: '', nickname: '' }]
    })
    const passwordType = ref(0)
    const passwordValue = ref('')
    const router = useRouter()

    // 添加用户
    const onAddUser = () => {
      formData.value.users.push({ username: '', nickname: '' })
    }

    // 删除用户
    const onDelete = (idx: number) => {
      formData.value.users.splice(idx, 1)
    }

    const onBack = () => router.back()

    return {
      form,
      formData,
      passwordType,
      passwordValue,
      onAddUser,
      onDelete,
      onBack
    }
  }
})
</script>

<style scoped lang="scss">
.list-row {
  display: flex;
  width: 740px;
  margin-bottom: 10px;
  &-item {
    margin-right: 10px;
    flex: 0 0 300px;
    .required {
      font-style: normal;
      color: #ff0000;
      font-size: 12px;
      margin-right: 6px;
    }
  }
  &-right {
    flex: 1;
  }
}
</style>
